<script lang="ts" setup>
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'

import { Role } from '@/constants/role'
import { defineMessage } from '@/locales'

import enUS from './locales/en-US.json' with { type: 'json' }
import zhCN from './locales/zh-CN.json' with { type: 'json' }

const { t } = useI18n<[typeof import('./locales/zh-CN.json')], Locales>({
  useScope: 'local',
  messages: defineMessage(enUS, zhCN)
})

const props = defineProps<{ role: Role }>()

const roleTokens = {
  [Role.Student]: 'student',
  [Role.Teacher]: 'teacher',
  [Role.Admin]: 'admin'
} as Record<Role, string>
const roleColor = {
  [roleTokens[Role.Student]]: 'green',
  [roleTokens[Role.Teacher]]: 'blue',
  [roleTokens[Role.Admin]]: 'red'
} as const

const enabledRoles = computed(() => {
  return [Role.Admin, Role.Teacher, Role.Student]
    .filter((role) => (props.role & role) !== 0)
    .map((role) => roleTokens[role])
})
</script>

<template>
  <a-tag
    :color="roleColor[role]"
    v-bind="$attrs"
    class="mr-1"
    v-for="role of enabledRoles"
    :key="role"
  >
    {{ t(role) }}
  </a-tag>
</template>
